<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		* { margin: 0; padding: 0; line-height: 200% }
		h1 { font-size: 20px; margin-top: 20px }

	</style>
</head>
<body>
	<h1>员工查询</h1>
	<label>请输入员工编号：</label>
	<input type="text" id="keyword" name="" />
	<button id="search">查询</button><br>
	<p id="searchResult"></p>


	<h1>员工创建</h1>
	<label>请输入员工姓名：</label>
	<input type="text" id="staffName" /><br>

	<label>请输入员工编号：</label>
	<input type="text" id="staffNumber" /><br>

	<label>请输入员工姓别：</label>
	<select id="staffSex">
		<option>男</option>
		<option>女</option>
	</select><br>

	<label>请输入员工职位：</label>
	<input type="text" id="staffJob" /><br>

	<button id="save">保存</button><br>
	<p id="createResult"></p>

	<script src="jquery.js"></script>
	<script>
		// 用jQuery实现Ajax
		/*
		jQuery.ajax([settings])
			type : 类型，"POST"或"GET",默认为"GET"
			url : 发送请求的地址
			data : 是一个对象，连同请求发送到服务器的数据
			dataType : 预期服务器返回的数据类型。如果不指定，jQuery将自动根据 HTTP 包 MIME 信息来智能判断，一般我们采用json格式，可以设置为"json"
			success : 是一个方法，请求成功后的回调函数。传入返回后的数据 ，以及包含成功代码的字符串
			error : 是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象
			async : 是否异步，默认为true(true为异步)
		*/

		// 用jq改写刚才的例子
		$(function(){

			// 查询员工
			$("#search").on("click",function(){
				$.ajax({
					type : "GET",
					url : "service.php?number=" + $("#keyword").val(),
					async : true,
					dataType : "json",
					success : function(data){
						//alert(JSON.stringify(data));
						if(data.success){
							$("#searchResult").html(data.msg);
						}else{
							$("#searchResult").html("发生错误：" + data.msg);
						}
					},
					error : function(jqXHR){
						alert("发生错误：" + jqXHR.status);
					}
				});
			});



			// 创建员工
			$("#save").on("click",function(){
				$.ajax({
					type : "POST",
					url : "service.php",
					data : {
						name 	: 	$("#staffName").val(),
						number 	:  	$("#staffNumber").val(),
						sex 	: 	$("#staffSex").val(),
						job 	: 	$("#staffJob").val(),
					},
					dataType : "json",
					async: true,
					success : function(data){
						if(data.success){
							$("#createResult").html(data.msg);
						}else{
							$("#createResult").html("发生错误：" + data.msg);
						}
					},
					error : function(jqXHR){
						alert("发生错误：" + jqXHR.status);
					}
				});
			});

		});
	</script>
</body>
</html>